<template>
  <div class="order-wrap">
    <div class="order-list-choose">
      <div class="order-list-option">
        选择产品：
        <v-selection :selections="products" @on-change="productChange"></v-selection>

        <v-selection :selections="products2" @on-change="productChange2"></v-selection>
      </div>

      <div class="order-list-option">
        开始日期：
        <v-date-picker @on-change="changeStartDate"></v-date-picker>
      </div>

      <div class="order-list-option">
        结束日期：
        <v-date-picker @on-change="changeEndDate"></v-date-picker>
      </div>

      <div class="order-list-option">
        关键词：
        <input type="text" v-model.lazy="query" class="order-query">
      </div>
    </div>
    <div class="order-list-table">
      <table>
        <tr>
          <th v-for="head in tableHeads" @click="changeOrder(head)" :class="{active: head.active}">{{ head.label }}</th>
        </tr>
        <!-- tableData数据库请求过来的参数 -->
        <tr v-for="item in tableData">
          <!-- 表头数据 -->
          <td v-for="head in tableHeads">
            {{item[head.key]}}
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
/* 下拉框 */
import VSelection from '../components/base/selection.vue'
/* 日历 */
import VDatePicker from '../components/base/datepicker.vue'
import _ from 'lodash'
export default {
  components: {
    VSelection,
    VDatePicker
  },
  // 接收组件的属性（参数）
  props: {

  },
  // 变量
  data () {
    return {
      // 关键词
      query: '',
      // 产品id
      productId: 0,
      productId2: 0,
      // 开始日期
      startDate: '',
      // 结束日期
      endDate: '',
      // 订单列表数据
      tableData: [],
      // 表格排序
      currentOrder: 'asc',
      products: [
        {
          label: '数据统计',
          value: 0
        },
        {
          label: '数据预测',
          value: 1
        },
        {
          label: '流量分析',
          value: 2
        },
        {
          label: '广告发布',
          value: 3
        }
      ],
      products2: [
        {
          label: '111',
          value: 0
        },
        {
          label: '222',
          value: 1
        },
        {
          label: '333',
          value: 2
        },
        {
          label: '444',
          value: 3
        }
      ],
      tableHeads: [
        {
          label: '订单号',
          key: 'orderId'
        },
        {
          label: '购买产品',
          key: 'product'
        },
        {
          label: '版本类型',
          key: 'version'
        },
        {
          label: '有效时间',
          key: 'period'
        },
        {
          label: '购买日期',
          key: 'date'
        },
        {
          label: '数量',
          key: 'buyNum'
        },
        {
          label: '总价',
          key: 'amount'
        }
      ],
    }
  },
  //计算属性
  computed : {

  },
  // 方法
  methods: {
    // 选择产品
    productChange (obj) {
      this.productId = obj.value
      this.getTableData()
    },
    productChange2 (obj) {
      this.productId2 = obj.value
      this.getTableData()
    },
    // 开始日期
    changeStartDate (data) {
      this.startDate = data
      this.getTableData()
    },
    // 结束日期
    changeEndDate (data) {
      this.endDate = data
      this.getTableData()
    },
    // 获取列表数据
    getTableData () {
      let reqParams = {
        query: this.query,
        productId: this.productId,
        startDate: this.startDate,
        endDate: this.endDate
      }
      this.$http.get('/api/getOrderList').then((res) => {
        this.tableData = res.data.list
      }, (err) => {

      })
    },
    changeOrder (headItem) {
      // 把所有的item置灰
      this.tableHeads.map((item) => {
        item.active = false
        return item
      })
      headItem.active = true
      if (this.currentOrder === 'asc'){
        this.currentOrder = 'desc'
      }
      else if (this.currentOrder === 'desc'){
        this.currentOrder = 'asc'
      }
      /* this.tableData要排序的数据 */
      /* headItem.key根据哪个字段进行排序 */
      /* this.currentOrder排序的方式 */
      this.tableData = _.orderBy(this.tableData, headItem.key, this.currentOrder)
    }
  },
  //渲染完毕后执行
  mounted () {
    this.getTableData()

//    console.log(this.$store)
  },
  // 鼠标移出的时候执行
  watch: {
    query () {
      console.log('df')
    }
  }
}
</script>

<style scoped>
  .order-wrap {
    width: 1200px;
    min-height: 800px;
    margin: 20px auto;
    overflow: hidden;
  }
  .order-wrap h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .order-query {
    height: 25px;
    line-height: 25px;
    border: 1px solid #e3e3e3;
    outline: none;
    text-indent: 10px;
  }
  .order-list-option {
    display: inline-block;
    padding-left: 15px;
  }
  .order-list-option:first-child {
    padding-left: 0;
  }
  .order-list-table {
    margin-top: 20px;
  }
  .order-list-table table {
    width: 100%;
    background: #fff;
  }
  .order-list-table td,
  .order-list-table th {
    border: 1px solid #e3e3e3;
    text-align: center;
    padding: 10px 0;
  }
  .order-list-table th {
    background: #4fc08d;
    color: #fff;
    border: 1px solid #4fc08d;
    cursor: pointer;
  }
  .order-list-table th.active {
    background: #35495e;
  }
</style>
